<template>
    <!-- 贷后管理 -->
    <div>
        <div class="fksh">
            <p>还款管理</p>
            <!-- 搜索框 -->
            <div class="qymc">
                <el-select v-model="value" class="m-2" placeholder="客户名称">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                        size="small" />
                </el-select>
            </div>
            <div class="ssk">
                <el-input v-model="input1" class="w-50 m-2" placeholder="请输入要查询的核心企业名称">
                    <template #prefix>
                        <el-icon class="el-input__icon">
                            <search />
                        </el-icon>
                    </template>
                </el-input>
            </div>
            <div class="hxqy">
                <el-select v-model="value2" class="m-2" placeholder="企业类型">
                    <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"
                        size="small" />
                </el-select>
            </div>
            <!-- 按钮 -->
            <div class="anniu">
                <el-button type="primary">查询</el-button>
                <el-button class="cz">重置</el-button>
            </div>
            <!-- 表格 -->
            <div class="bg">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column label="序号" width="60">
                        <template #default="scope">
                            <div style="display: flex; align-items: center">
                                <span>{{ scope.$index + 1 }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="客户名称" width="120">
                        <template #default="scope">
                            <div style="display: flex; align-items: center">
                                <span style="margin-left: 10px">{{ scope.row.name }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="证件号码" width="190">
                        <template #default="scope">
                            <div style="display: flex; align-items: center">
                                <span style="margin-left: 10px">{{ scope.row.zhengjian }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="逾期金额">
                        <template #default="scope">
                            <div style="display: flex; align-items: center">
                                <span style="margin-left: 10px">{{ scope.row.yuqijine }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="逾期期数">
                        <template #default="scope">
                            <div style="display: flex; align-items: center">
                                <span style="margin-left: 10px">{{ scope.row.yuqiqishu }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="逾期天数">
                        <template #default="scope">
                            <div style="display: flex; align-items: center">
                                <span style="margin-left: 10px">{{ scope.row.yuqitianshu }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="催收次数">
                        <template #default="scope">
                            <div style="display: flex; align-items: center">
                                <span style="margin-left: 10px">{{ scope.row.cuishoucishu }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-icon class="xyj" @click="tiaozhuan" color="rgb(78, 171, 254)">
                                <CirclePlus />
                            </el-icon>
                            <el-icon @click="tiaozhuan1" color="rgb(78, 171, 254)">
                                <Notebook />
                            </el-icon>
                            <el-icon @click="open" color="rgb(78, 171, 254)">
                                <SuccessFilled />
                            </el-icon>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!-- 分页 -->
            <div class="fy">
                <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[10, 15]"
                    :small="small" :disabled="disabled" :background="background"
                    layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, markRaw } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { QuestionFilled } from '@element-plus/icons-vue'

const router = useRouter()

const currentPage4 = ref()
const pageSize4 = ref()
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}


const input1 = ref('')
const value = ref('')
const value1 = ref('')
const value2 = ref('')




const tiaozhuan = () => {
    router.push("/home/postloan/postloanbb")
}
const tiaozhuan1 = () => {
    router.push("/home/postloan/postloanbb1")
}

const tableData = [
    {
        name: '张三',
        zhengjian: '123456789',
        yuqijine: '10,000,000.00',
        yuqiqishu: '3',
        yuqitianshu: '123',
        cuishoucishu: '3',
    },
    {
        name: '张三',
        zhengjian: '123456789',
        yuqijine: '10,000,000.00',
        yuqiqishu: '3',
        yuqitianshu: '123',
        cuishoucishu: '3',
    },
]


const options = [
    {
        value: '客户名称',
        label: '客户名称',
    },
    {
        value: '证件号码',
        label: '证件号码',
    },
    {
        value: '业务编号',
        label: '业务编号',
    },
]

const options2 = [
    {
        value: '全部',
        label: '全部',
    },
    {
        value: '核心企业',
        label: '核心企业',
    },
    {
        value: '上下游企业',
        label: '上下游企业',
    },
]


const open = () => {
    ElMessageBox.confirm(
        '是否确认要提交资产保全申请?',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true,
            icon: markRaw(QuestionFilled),
        }
    )
}


</script>

<style scoped>
.fksh p {
    background-color: rgb(78, 171, 254);
    color: #fff;
    width: 200px;
    height: 40px;
    border-radius: 50px;
    text-align: center;
    line-height: 40px;
}

.fksh .qymc {
    display: inline-block;
    width: 100px;

}

.fksh .ssk {
    display: inline-block;
    width: 250px;
    margin: 0 20px;
}

.fksh .zt,
.hxqy {
    display: inline-block;
    margin: 0 20px 0 0;
    width: 100px;
}

.fksh .dc,
.xz,
.cz {
    color: rgb(78, 171, 254);
}

.fksh .anniu {
    display: inline-block;
}

.fksh .anniu .dc {
    margin-left: 250px;
}



.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

.el-pagination {
    justify-content: center;
}

.fksh .el-table tr th {
    text-align: center;
}
</style>